<script setup lang="ts">
import { ref } from 'vue'
import { ElInput, ElSelect, ElOption, ElButton, ElMessage, ElTimePicker } from 'element-plus'

const props = defineProps<{
  visible: boolean
}>()

const emit = defineEmits(['update:visible', 'confirm'])

// 当前步骤
const currentStep = ref(1)

// 项目搜索关键字
const searchKeyword = ref('')

// 项目列表
const projects = ref([
  {
    id: 1,
    name: '测试项目',
    pages: 1,
    members: 1,
    icon: '项'
  }
])

// 表单数据
const formData = ref({
  projectId: null as number | null,
  pushType: '', // 推送方式
  pushPage: '', // 推送页面
  title: '', // 推送标题
  receiver: '', // 接收人
  frequency: '', // 推送频率
  date: '', // 推送日期
  time: '' // 推送时间
})

// 推送方式选项
const pushTypeOptions = [
  { value: 'email', label: '邮件推送' },
  { value: 'weixin', label: '微信推送' },
  { value: 'dingding', label: '钉钉推送' }
]

// 频率选项
const frequencyOptions = [
  { value: 'once', label: '单次' },
  { value: 'daily', label: '每天' },
  { value: 'weekly', label: '每周' },
  { value: 'monthly', label: '每月' }
]

// 选择项目
const selectProject = (projectId: number) => {
  formData.value.projectId = projectId
  currentStep.value = 2
}

// 返回项目选择
const backToProjectSelect = () => {
  currentStep.value = 1
  formData.value.projectId = null
}

// 关闭对话框
const closeDialog = () => {
  emit('update:visible', false)
  currentStep.value = 1
  formData.value = {
    projectId: null,
    pushType: '',
    pushPage: '',
    title: '',
    receiver: '',
    frequency: '',
    date: '',
    time: ''
  }
}

// 确认创建
const handleConfirm = () => {
  if (!formData.value.pushType) {
    ElMessage.warning('请选择推送方式')
    return
  }
  if (!formData.value.pushPage) {
    ElMessage.warning('请选择推送页面')
    return
  }
  if (!formData.value.title) {
    ElMessage.warning('请输入推送标题')
    return
  }
  
  emit('confirm', formData.value)
  closeDialog()
  ElMessage.success('创建成功')
}

// 测试推送
const testPush = () => {
  ElMessage.success('测试推送成功')
}
</script>

<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="emit('update:visible', $event)"
    :title="currentStep === 1 ? '请选择所属项目' : '新建推送'"
    width="600px"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <!-- 项目选择页面 -->
    <div v-if="currentStep === 1" class="project-selection">
      <div class="search-header">
        <el-button type="primary">新建项目</el-button>
        <el-input
          v-model="searchKeyword"
          placeholder="输入名称搜索"
          class="search-input"
        >
          <template #suffix>
            <i class="fa fa-search"></i>
          </template>
        </el-input>
      </div>

      <div class="project-list">
        <div
          v-for="project in projects"
          :key="project.id"
          class="project-item"
          @click="selectProject(project.id)"
        >
          <div class="project-icon">{{ project.icon }}</div>
          <div class="project-info">
            <h3>{{ project.name }}</h3>
            <div class="project-stats">
              <span>页面: {{ project.pages }}</span>
              <span>成员: {{ project.members }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 推送配置页面 -->
    <div v-else class="push-form">
      <div class="form-content">
        <div class="form-item">
          <div class="label">推送方式</div>
          <el-select v-model="formData.pushType" class="full-width" placeholder="请选择推送方式">
            <el-option
              v-for="option in pushTypeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>

        <div class="form-item">
          <div class="label">推送页面 <i class="fa fa-info-circle help-icon"></i></div>
          <el-select v-model="formData.pushPage" class="full-width" placeholder="请选择">
            <el-option value="page1" label="页面1" />
          </el-select>
        </div>

        <div class="form-item">
          <div class="label">推送标题</div>
          <el-input
            v-model="formData.title"
            placeholder="请输入标题"
          />
        </div>

        <div class="form-item">
          <div class="label">接收人 <i class="fa fa-info-circle help-icon"></i></div>
          <el-select v-model="formData.receiver" class="full-width" placeholder="请选择">
            <el-option value="user1" label="用户1" />
          </el-select>
        </div>

        <div class="form-item">
          <div class="label">推送频率</div>
          <div class="frequency-group">
            <el-select v-model="formData.frequency" placeholder="请选择频率">
              <el-option
                v-for="option in frequencyOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <el-select v-model="formData.date" placeholder="请选择日期">
              <el-option value="1" label="周一" />
            </el-select>
            <el-time-picker
              v-model="formData.time"
              placeholder="请选择时间"
              format="HH:mm"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <template v-if="currentStep === 2">
          <el-button @click="backToProjectSelect">上一步</el-button>
          <el-button @click="testPush">推送测试</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.project-selection {
  padding: 20px 0;
}

.search-header {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.search-input {
  width: 240px;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.project-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.project-item:hover {
  background: #f0f2f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-icon {
  width: 48px;
  height: 48px;
  background: #e6f7ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #1890ff;
  font-size: 20px;
}

.project-info {
  flex: 1;
}

.project-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.project-stats {
  display: flex;
  gap: 16px;
  color: #909399;
  font-size: 14px;
}

.push-form {
  padding: 20px 0;
}

.form-content {
  max-width: 480px;
  margin: 0 auto;
}

.form-item {
  margin-bottom: 24px;
}

.form-item .label {
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.help-icon {
  color: #909399;
  cursor: help;
}

.full-width {
  width: 100%;
}

.frequency-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
}
</style> 